<template lang="pug">
  div.ivu-table-wrapper.custom-table-footer(style="overflow:hidden;")
    Table(ref="table" :border="true" :columns="summaryColumns" :data="data" :width="width" :show-header="false")
</template>

<script>
import _ from 'lodash';
export default {
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    width: {
      type: Number,
      default() {
        return null;
      }
    },
    columnsWidth: {
      type: Object,
      default() {
        return Object.create(null);
      }
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    summaryColumns() {
      let columns = _.cloneDeep(this.columns);
      columns = _.map(columns, col => {
        if (col.type) {
          col.type = null;
        }
        if (col.renderSummary) {
          col.render = col.renderSummary;
        } else if (!col.render) {
          col.render = (h, params) => {
            const value = params.row[col.key];
            return <span>{value || '-'}</span>;
          };
        }
        return col;
      });
      return columns;
    }
  }
};
</script>

<style lang="less">
.custom-table-footer {
  table {
    td {
      background-color: #f5f7f9;
    }
  }
}
</style>
